<!--通过部门选择用户-->
<template>
  <FormItemRest>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      :title="modalTitle"
      width="1200px"
      @ok="handleOk"
      destroyOnClose
      @visible-change="visibleChange"
    >
      <a-row :gutter="10">
        <a-col :md="7" :sm="24">
          <a-card :style="{ minHeight: '613px', overflow: 'auto' }">
            <!--组织机构-->
            <BasicTree
              ref="treeRef"
              :style="{ minWidth: '250px' }"
              selectable
              @select="onDepSelect"
              :treeData="departTree"
              :selectedKeys="selectedDepIds"
              :expandedKeys="expandedKeys"
              :clickRowToExpand="false"
              :fieldNames="{ title: 'name', key: 'id' }"
            />
          </a-card>
        </a-col>
        <a-col :md="17" :sm="24">
          <a-card :style="{ minHeight: '613px', overflow: 'auto' }">
            <BasicTable
              ref="tableRef"
              v-bind="getBindValue"
              :searchInfo="searchInfo"
              :api="getUserPage"
              :rowSelection="rowSelection"
            />
            <!--用户列表-->
          </a-card>
        </a-col>
      </a-row>
    </BasicModal>
  </FormItemRest>
</template>
<script lang="ts">
  import { defineComponent, unref, ref } from 'vue';
  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
  import { BasicTree } from '/@/components/Tree/index';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { selectProps } from '../props/props';
  import { useSelectBiz } from '/@/components/Form/src/jinhui/components/hooks/useSelectBiz';
  import { getDeptTreeList } from '/@/views/system/dept/dept.api';
  import { getUserPage } from '/@/views/system/user/user.api';
  import { FormItemRest } from 'ant-design-vue/es/form';

  export default defineComponent({
    name: 'UserSelectByDepModal',
    components: {
      //此处需要异步加载BasicTable
      BasicModal,
      BasicTree,
      FormItemRest,
      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
        loading: true,
      }),
    },
    props: {
      ...selectProps,
      //选择框标题
      modalTitle: {
        type: String,
        default: '部门用户选择',
      },
    },
    emits: ['register', 'getSelectResult'],
    setup(props, { emit }) {
      const tableRef = ref();
      const treeRef = ref();
      //注册弹框
      const [register, { closeModal }] = useModal();
      const attrs = useAttrs();
      const departTree = ref([]);
      const selectedDepIds = ref([]);
      const expandedKeys = ref([]);
      const searchInfo = {};
      /**
       *表格配置
       */
      const tableProps = {
        columns: [
          {
            title: '用户账号',
            dataIndex: 'username',
            width: 50,
          },
          {
            title: '用户姓名',
            dataIndex: 'realName',
            width: 50,
          },
        ],
        useSearchForm: true,
        canResize: false,
        showIndexColumn: false,
        striped: true,
        bordered: true,
        size: 'small',
        formConfig: {
          // labelWidth: 200,
          baseColProps: {
            xs: 24,
            sm: 8,
            md: 6,
            lg: 8,
            xl: 6,
            xxl: 10,
          },
          schemas: [
            {
              label: '账号',
              field: 'username',
              component: 'Input',
            },
          ],
          resetFunc: customResetFunc,
        },
      };
      const getBindValue = Object.assign({}, unref(props), unref(attrs), tableProps);
      const [{ rowSelection, visibleChange, indexColumnProps, getSelectResult, reset }] =
        useSelectBiz(getUserPage, getBindValue);

      /**
       * 加载树形数据
       */
      function queryDepartTree() {
        getDeptTreeList(null).then((res) => {
          if (res) {
            departTree.value = res;
          }
        });
      }

      /**
       * 点击树节点,筛选出对应的用户
       */
      function onDepSelect(keys) {
        if (keys[0] != null) {
          if (unref(selectedDepIds)[0] !== keys[0]) {
            selectedDepIds.value = [keys[0]];
          }
          searchInfo['deptId'] = unref(selectedDepIds).join(',');
          tableRef.value.reload();
        }
      }

      /**
       * 自定义重置方法
       * */
      async function customResetFunc() {
        console.log('自定义查询');
        //树节点清空
        selectedDepIds.value = [];
        //查询条件清空
        searchInfo['deptId'] = '';
        //选择项清空
        reset();
      }

      /**
       * 确定选择
       */
      function handleOk() {
        getSelectResult((options, values) => {
          //回传选项和已选择的值
          emit('getSelectResult', options, values);
          //关闭弹窗
          closeModal();
        });
      }

      return {
        //config,
        handleOk,
        searchInfo,
        register,
        indexColumnProps,
        visibleChange,
        getBindValue,
        rowSelection,

        departTree,
        selectedDepIds,
        expandedKeys,
        treeRef,
        tableRef,
        getUserPage,
        onDepSelect,
      };
    },
  });
</script>

<style scoped lang="less"></style>
